<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/static/ext-all.css"/>
        <style type="text/css" title="main" media="screen"> 
            #frame_editor {
                background-color:#FFFFFF; 
                border-color:#CCCCCC #BBBBBB #BBBBBB #CCCCCC;
                border-style:solid;
                border-width:1px 2px 2px 1px; 
                width:100%; 
                height:100%; 
                overflow: auto;
            }
            #editordiv { 
                background-color:#F3F3F3 !important;
                border:0px solid #ff0000; 
                overflow:hidden;
                height:98%;
                margin-right:2px;
                margin-bottom:350px;
                margin-top:0px;
                margin-bottom:60px !important;
            }
            body {
                overflow:hidden;
            
            }

        </style>
        <script type="text/javascript" src="/static/jquery.js"></script>
        <script type="text/javascript" src="/static/ext-jquery-adapter.js"></script> 
        <script type="text/javascript" src="/static/ext-all.js"></script> 
        <script type="text/javascript">
            Ext.onReady(function(){
	            var tb = new Ext.Toolbar();
	            tb.render('toolbar')
	            
	            tb.add(
	                {
	                    text: 'Bold',
	                    enableToggle: true,
	                    pressed: false
	                }
	            );
	            tb.doLayout();
	            
	            
	            $('#button').click(function() {
	                console.log('in click');
	                Ext.Msg.alert('TODO!', 'Thanks for clicking me, WHEE!');
	            });
	        });
        </script>
    </head>
    <body>
        <div id='toolbar'></div>
        <div id='editordiv'>
                <iframe id='frame_editor' src='/pages/editorframe/{{ page_uid }}/{{ tag_name }}/'></iframe>
        </div>
    </body>
</html>